<template>
  <div class="cart_list">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="cart_list_center"
    >
      <!-- 车辆图片模块-->
      <div class="car_list_img">
        <img :src="item.car_img" alt="" />
      </div>
      <!-- 车辆信息模块 -->
      <div class="car_list_name">
        <!-- 车辆名称车辆评分 -->
        <div class="car_list_name_top">
          <span>{{ item.car_name }}</span>
          <el-rate
            v-model="item.car_score"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </div>
        <!-- 车辆body部分 -->
        <div class="car_list_name_body">
          <span>自动{{ item.car_power }}</span>
          |
          <span>{{ item.car_type }}</span>
          |
          <span>{{ item.car_seat }}</span>
          <!-- 车辆详情查看 -->
          <a href="javascript:;" @click="showDetail = true">车辆详情></a>
          <el-dialog
            title="车辆信息"
            :visible.sync="showDetail"
            modal
            show-close
            center
            :open="openDetail(msg)"
            top="40vh"
            :lock-scroll="true"
            width="980px"
          >
            <div class="car_bg_detail">
              <div class="car_bg_detail_left">
                <img src="/image/cars/aodi/ad1.png" alt="" />
                <p>车辆</p>
                <span>车辆颜色说明</span>
                <i>车辆颜色请以门店为准，图片仅为车型示意图。</i>
              </div>
              <div class="car_bg_detail_right">
                <ul>
                  <li>
                    <img src="/image/car_icon/bsx.png" alt="" />
                    <p>变速箱:{{ item.car_speedbox }}</p>
                  </li>
                  <li>
                    <img src="/image/car_icon/yx.png" alt="" />
                    <p>油箱容量:{{ item.car_tank }}</p>
                  </li>
                  <li>
                    <img src="/image/car_icon/pl.png" alt="" />
                    <p>排量:{{ item.car_power }}</p>
                  </li>
                  <li>
                    <img src="/image/car_icon/zw.png" alt="" />
                    <p>座位数:{{ item.car_seat }}</p>
                  </li>
                  <li>
                    <img src="/image/car_icon/wlzy.png" alt="" />
                    <p>进气:涡轮增压</p>
                  </li>
                </ul>
              </div>
            </div>
          </el-dialog>
        </div>
        <!-- 车辆特点部分 -->
        <div class="car_list_name_foot">
          <span >{{item.car_feature}}</span>
          <!-- <span>{{ value }}</span> -->
          <!-- <span>蓝牙连接</span> -->
        </div>
      </div>
      <!-- 车辆价格/订租按钮模块 -->
      <div class="car_list_btn">
        <div class="car_list_btn_center">
          <span><em>￥</em> {{ item.car_price }}</span
          >/日均
          <button @click="toOrder(item.car_id,item.car_price)">预定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["day", "data",'location','returnTime','rentTime'],
  data() {
    return {
      showDetail: false,
      msg: "车辆数据",
      feature: [],
    };
  },
  // mounted () {
  //   console.log(this.location)
  // },
  methods: {
    openDetail(data) {
      // console.log(data);
    },
    toOrder(id,price) {
      if (this.day == 0  ) {
        alert("请选择租赁天数");
        return;
      }else if (this.location=='未知'){
        alert('请选择租赁地点')
        return;
      }
      this.$router.push(`/order/${this.day}/${this.location}/${id}/${this.returnTime}/${price}/${this.rentTime}`);
      // console.log(id)
    },
    // car_feature() {
    //   this.data.data.forEach((item) => {
    //     let str = item.car_feature;
    //     this.feature.push(str.split("，"));
    //     console.log(this.feature);
    //   });
    // },
  },
  computed: {},
};
</script>

<style src="../assets/css/cartlist.css" scoped></style>
<style lang="scss" scoped></style>
